﻿<!DOCTYPE html>
<html lang="en-US">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <meta charset="utf-8">
    <title>Modest</title>
    <!-- Main Stylesheet -->
    <link href="Content/animate.css" rel="stylesheet" />
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <link href="Content/templatemo-style.css" rel="stylesheet" />
    <!-- jQuery -->
    <script src="Scripts/jquery-1.11.0.min.js"></script>
    <script src="Scripts/jquery-migrate-1.2.1.min.js"></script>
    <script src="Scripts/custom.js"></script>
    <script src="Scripts/plugins.js"></script>
</head>
<body>
    <!-- HEADER -->
    <div class="fluid-container">
        <header class="site-header">
            <div class="navbar-default navbar-fixed-top">
                <div class="fluid-container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <a class="navbar-brand" href="#">个人首页</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a class="link-service" href="#services">Services</a></li>
                            <li><a class="link-facts" href="#facts">Facts</a></li>
                            <li><a class="link-portfolio" href="#portfolio">Portfolio</a></li>
                            <li><a class="link-clients" href="#clients">Clients</a></li>
                            <li><a class="link-contact" href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header> <!-- .site-header -->
    </div> <!-- .fluid-container -->
    <!-- WELCOME TEXT -->
    <div class="main-content">
        <div class="fluid-container">
            <div class="section-welcome">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <img src="img/portfolio/5.jpg" class="img-responsive animated fadeInLeft" alt="Time is happiness">
                    </div>
                    <div class="col-md-8 text-center welcome-section">
                        <br>
                        <h2 class="animated fadeInDown">We make clean and minimal apps</h2>
                        <br>
                        <p class="animated fadeInRight">We are a small group of designers and developers from the small island. Feel free to talk to us about your projects. We are happy and ready to assist you.</p>
                        <br>
                        <a href="#" class="button-grey animated fadeInUp">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/">免费模板</a></div>
        <!-- SERVICES -->
        <div class="fluid-container">
            <div class="section-services" id="services">
                <div class="row">
                    <div class="col-md-4 col-sm-12 col-xs-12 col-lg-4 text-center">
                        <article class="service animated fadeInUp">
                            <div class="service-header">
                                <h4>Web Development</h4>
                            </div>
                            <div class="service-icon">
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            <div class="service-text">
                                <p>Modest is <a href="#/tag/responsive">free responsive template</a>, mobile ready layout, and animated contents. You can use this template for your website. Please tell your friends about it. Thank you.</p>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12 col-lg-4 text-center">
                        <article class="service animated fadeInUp">
                            <div class="service-header">
                                <span class="s-left"></span>
                                <span class="s-right"></span>
                                <h4>Quality Photography</h4>
                            </div>
                            <div class="service-icon">
                                <i class="fa fa-camera-retro"></i>
                            </div>
                            <div class="service-text">
                                <p>Modest template is provided by <a href="#">templatemo.com</a> website. Fusce pretium, elit vel ornare porta, felis lorem ornare metus, in vulputate nibh odio ut ligula.</p>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12 col-lg-4 text-center">
                        <article class="service animated fadeInUp">
                            <div class="service-header">
                                <span class="s-left"></span>
                                <span class="s-right"></span>
                                <h4>Worldwide Support</h4>
                            </div>
                            <div class="service-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <div class="service-text">
                                <p>Quisque a lobortis ante. Sed a adipiscing tortor. In nec imperdiet justo. Fusce pretium, elit vel ornare porta, felis lorem ornare metus, in vulputate nibh odio ut ligula.</p>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>

        <!-- FUN FACTS -->
        <div class="fluid-container animated flipInX" id="facts">
            <div class="row">
                <div class="col-md-12 text-right">
                    <div class="section-header facts-header">
                        <h3>Some fun facts</h3>
                    </div>
                </div>
            </div>
            <div class="section-facts">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12 col-lg-3 text-center">
                        <div class="counter-item">
                            <div class="counter-inner">
                                <div class="counter-body">
                                    <h2 class="start-count" data-count="1604">0</h2>
                                    <h6>Projects Completed</h6>
                                    <div class="end-count"></div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- .counter-item -->
                    <div class="col-md-3 col-sm-6 col-xs-12 col-lg-3 text-center">
                        <div class="counter-item">
                            <div class="counter-inner">
                                <div class="counter-body">
                                    <h2 class="start-count" data-count="21">0</h2>
                                    <h6>Team Members</h6>
                                    <div class="end-count"></div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- .counter-item -->
                    <div class="col-md-3 col-sm-6 col-xs-12 col-lg-3 text-center">
                        <div class="counter-item">
                            <div class="counter-inner">
                                <div class="counter-body">
                                    <h2 class="start-count" data-count="302">0</h2>
                                    <h6>Satisfied Clients</h6>
                                    <div class="end-count"></div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- .counter-item -->
                    <div class="col-md-3 col-sm-6 col-xs-12 col-lg-3 text-center">
                        <div class="counter-item">
                            <div class="counter-inner">
                                <div class="counter-body">
                                    <h2 class="start-count" data-count="946">0</h2>
                                    <h6>Cups of Coffee</h6>
                                    <div class="end-count"></div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- .counter-item -->
                </div>
            </div>
        </div>

        <!-- PORTFOLIO -->
        <div class="fluid-container" id="portfolio">
            <div class="row">
                <div class="col-md-12 text-left">
                    <div class="section-header portfolio-header">
                        <h3>Our Lovely Work</h3>
                    </div>
                </div>
            </div>
            <div class="section-portfolio">
                <div class="row portfolio-holder">
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/1.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay first">
                            <a href="#"><h4 class="entry-title">DIGITAL PHOTO</h4></a>
                        </div>
                    </article>
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/2.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay second">
                            <a href="#"><h4 class="entry-title">QUALITY IMAGING</h4></a>
                        </div>
                    </article>
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/3.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay third">
                            <a href="#"><h4 class="entry-title">ANIMATIONS</h4></a>
                        </div>
                    </article>
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/4.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay fourth">
                            <a href="#"><h4 class="entry-title">HI FI SOUND</h4></a>
                        </div>
                    </article>
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/5.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay fifth">
                            <a href="#"><h4 class="entry-title">BEST IN TIME</h4></a>
                        </div>
                    </article>
                    <article class="portfolio col-md-4 col-sm-6 col-xs-12">
                        <div class="entry-thumbnail">
                            <img src="img/portfolio/6.jpg" alt="">
                        </div>
                        <div class="portfolio-overlay sixth">
                            <a href="#"><h4 class="entry-title">DELICIOUS ONE</h4></a>
                        </div>
                    </article>
                </div>
            </div>
        </div>

        <!-- CLIENTS -->
        <div class="fluid-container" id="clients">
            <div class="row">
                <div class="col-md-12 text-right">
                    <div class="section-header clients-header">
                        <h3>What Clients Say</h3>
                    </div>
                </div>
            </div>
            <div class="section-clients">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="client-icon">
                            <i class="i fa fa-quote-left"></i>
                        </div>
                        <ul class="client-slide">
                            <li>
                                <p>Odit nesciunt, voluptates optio numquam error, aut quis eius nostrum. Impedit eaque corrupti quis facere nobis, quam commodi. Repellat vel suscipit ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <h4>Cindy Three</h4>
                            </li>
                            <li>
                                <p>Impedit eaque corrupti quis facere nobis, quam commodi. Repellat vel suscipit ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nesciunt, voluptates optio numquam error, aut quis eius nostrum.</p>
                                <h4>Linda Two</h4>
                            </li>
                            <li>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nesciunt, voluptates optio numquam error, aut quis eius nostrum. Impedit eaque corrupti quis facere nobis, quam commodi. Repellat vel suscipit ut.</p>
                                <h4>Marry One</h4>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- CONTACT US -->
        <div class="fluid-container" id="contact">
            <div class="row">
                <div class="col-md-12 text-left">
                    <div class="section-header contact-header">
                        <h3>Stay in Touch</h3>
                    </div>
                </div>
            </div>
            <div class="section-contact">
                <div class="row">
                    <div class="col-md-5 col-sm-12 col-xs-12">
                        <form action="#" method="post" id="contact-form">
                            <fieldset>
                                <label for="name">Name:</label>
                                <input type="text" name="name" id="name">
                            </fieldset>
                            <fieldset>
                                <label for="email">Email Address:</label>
                                <input type="email" name="email" id="email">
                            </fieldset>
                            <fieldset>
                                <label for="phone">Phone Number:</label>
                                <input type="tel" name="phone" id="phone">
                            </fieldset>
                            <fieldset>
                                <label for="message">Describe your project:</label>
                                <textarea name="message" id="message" rows="4"></textarea>
                            </fieldset>
                            <fieldset>
                                <input type="submit" class="button-dark" value="Send Message">
                            </fieldset>
                        </form>
                    </div>
                    <div class="col-md-7 col-sm-12 col-xs-12">
                        <div class="contact-map">
                            Maps
                        </div>
                        <div class="contact-infos">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Email:</strong> <a href="#">info@company.com</a></p>
                                    <p><strong>Phone:</strong> 080-070-0120</p>
                                </div>
                                <div class="col-md-6">
                                    <p>Qui laudantium dignissimos eaque maxime obcaecati animi, maiores delectus voluptatum possimu.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="fluid-container">
            <footer class="site-footer">
                <a href="#" class="back-to-top">
                    <i class="fa fa-angle-up"></i>
                </a>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12 padding-left-0">
                        <p class="copyright">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 padding-right-0">
                        <ul class="social">
                            <li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
                            <li><a href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        </div>
    </div>


    <!-- Plugins -->
    <script src="js/bootstrap.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/custom.js"></script>

    <!-- Google Map -->

</body>
</html>